<template>
	<div class="User">
		<div class="header">
			<div class="container">
				<span class="iconfont">&#xe6a9;</span>
				<p>个人中心</p>
				<span class="iconfont">&#xe764;</span>
			</div>
		</div>
		<div class="content">
			<div class="photo">
				<p>
					<img src="" alt="" />
					<router-link to="/Login">
						<i>点击登录</i>
					</router-link>
				</p>
				<span>
					<i class="iconfont">&#xe608;</i>
					<em>我的收藏</em>
				</span>
			</div>
			<div class="order">
				<p>我的订单</p>
				<span>查看全部订单</span>
			</div>
			<div class="nav">
				<ul>
					<li>
						<span class="iconfont">&#xe601;</span>
						<span class="text">待付款</span>
					</li>
					<li>
						<span class="iconfont">&#xe615;</span>
						<span class="text">待发货</span>
					</li>
					<li>
						<span class="iconfont">&#xe600;</span>
						<span class="text">待收货</span>
					</li>
					<li>
						<span class="iconfont">&#xe610;</span>
						<span class="text">待评价</span>
					</li>
					<li>
						<span class="iconfont">&#xe602;</span>
						<span class="text">退款/售后</span>
					</li>
				</ul>
			</div>
			<div class="address">
				<p>收货地址管理</p>
			</div>
		</div>
		<MenuBar></MenuBar>
	</div>
</template>

<script>
	import MenuBar from "@/pages/Common/MenuBar"
	export default{
		components:{
			MenuBar
		}
	}
</script>

<style scoped>
	.header{
		width:100%;
		height: 323px;
		background:#ff9900;
		position: relative;
	}
	.header .container{
		box-sizing: border-box;
		padding:25px 30px;
		display: flex;
		justify-content: space-between;
	}
	.header .container .iconfont{
		font-size: 40px;
		color:#fff;
	}
	.header .container p{
		font-size: 41px;
		color:#fff;
	}
	.content{
		width:100%;
		height: 1198px;
		background: #f3f3f3;
	}
	.content .photo{
		width:100%;
		height:262px;
		background: #fafafa;
	}
	.content .photo p{
		width:217px;
		margin:0 auto;
		text-align: center;
		position: absolute;
		top: 189px;
		left:50%;
		margin-left:-103px;
	}
	.content .photo p img{
		width:188px;
		height: 188px;
		display:block;
		border-radius: 50%;
		background:#e6dfdf;
		border:15px solid #fff;
	}
	.content .photo p i{
		font-size: 33px;
		color:#333;
		display: block;
		margin-top:20px;
	}
	.content .photo span{
		display: block;
		padding-top:180px;
		margin-left: 35px;
		line-height: 38px;
	}
	.content .photo span .iconfont{
		font-size: 38px;
		color:#ee6d69;
	}
	.content .photo span em{
		font-size: 33px;
		color:#333;
		margin-left:20px;
	}
	.content .order{
		height: 123px;
		margin-top:15px;
		background: #fafafa;
		line-height: 123px;
		font-size: 33px;
		border-bottom:1px solid #b3b3b3;
	}
	.content .order p{
		margin-left: 45px;
		font-size: 33px;
		color:#333;
		float:left;
	}
	.content .order span{
		color:#999;
		float:right;
	}
	.content .nav{
		width:100%;
		height: 190px;
		background: #fafafa;
		display:flex;
		align-items: center;
	}
	.content .nav ul{
		width:inherit;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding:0 35px;
	}
	.content .nav ul li{
		width:100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.content .nav li span{
		display: block;
		color:#666;
	}
	.content .nav ul li .iconfont{
		font-size: 56px;
	}
	.content .nav ul li .text{
		margin-top: 25px;
	}
	.content .address{
		width:100%;
		height: 130px;
		background: #fafafa;
		line-height: 130px;
		margin-top: 15px;
	}
	.content .address p{
		font-size: 33.35px;
		color:#999;
		margin-left:45px;
	}
</style>